﻿<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,maximum-scale=1,user-scalable=no">
    <title>3P</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="css/main.css">
    <style type="text/css">
        html,body{ background-color: #F2F2F2;}
    </style>
</head>
<body>
    <!-- 中间内容 -->
    <div class="activeClose">
        <img src="images/close.png" class="closeBtn">
    </div>
    <section class="lottery" id="lottery">
        <img class="banner" src="images/title_u180.jpg">
        <!-- 抽奖轮盘 -->
        <table width="100%" border="0" cellpadding="0" cellspacing="15px">
            <tbody>
                <tr>
                    <td class="lottery-unit lottery-unit-0 ">
                        <span class="photo j_1"><img data-src="images/u105.jpg" class="loadImg"></span>
                        <div class="mask"></div>
                    </td>
                    <td class="lottery-unit lottery-unit-1 j_1">
                        <span class="photo j_1"><img data-src="images/u112.jpg" class="loadImg"></span>
                        <div class="mask"></div>
                    </td>
                    <td class="lottery-unit lottery-unit-2">
                        <span class="photo j_1"><img data-src="images/u112.jpg" class="loadImg"></span>
                        <div class="mask"></div>
                    </td>
                    <td class="lottery-unit lottery-unit-3">
                        <span class="photo j_1"><img data-src="images/u112.jpg" class="loadImg"></span>
                        <div class="mask"></div>
                    </td>
                    <td class="lottery-unit lottery-unit-4">
                        <span class="photo j_1"><img data-src="images/u112.jpg" class="loadImg"></span>
                        <div class="mask"></div>
                    </td>
                </tr>
                <tr>
                    <td class="lottery-unit lottery-unit-15">
                        <span class="photo j_1"><img data-src="images/u112.jpg" class="loadImg"></span>
                        <div class="mask"></div>
                    </td>
                    <!-- 抽奖按钮 -->
                    <td colspan="3" rowspan="3">
                        <div class="dn">
                            <span class="tips">完成微信朋友圈分享<br>即可开始抽奖</span>
                            <!-- <span class="tips">分享成功，开始抽奖</span> -->

                            <!-- 激活按钮后去掉disabled -->
                            <span class="cjBtn disabled">开始抽奖</span>
                        </div>
                        <div class="result">
                            <div class="awardBox">
                                <img src="images/u126.jpg" class="award">
                                <div class="textC w50 padLR375">
                                    <span class="db textL line15 font24 colorY">恭喜您获得</span>
                                    <span class="db line15 font40">茉莉蜜桃清口含片</span>
                                    <span class="db line15 color5e font30">43g/瓶</span>
                                    <span class="db line15 colorR font48">&yen;7.00</span>
                                    <div class="padTB375 line15 font24">
                                        请等待售卖机掉落商品
                                    </div>
                                </div>
                            </div>
                            <span class="exitBtn">结束</span>
                        </div>
                    </td>
                    <td class="lottery-unit lottery-unit-5">
                        <span class="photo j_1"><img data-src="images/u112.jpg" class="loadImg"></span>
                        <div class="mask"></div>
                    </td>
                </tr>
                <tr>
                    <td class="lottery-unit lottery-unit-14">
                    <span class="photo j_1"><img data-src="images/u112.jpg" class="loadImg"></span>
                    <div class="mask"></div>
                    </td>
                    <td class="lottery-unit lottery-unit-6">
                        <span class="photo j_1"><img data-src="images/u112.jpg" class="loadImg"></span>
                        <div class="mask"></div>
                    </td>
                </tr>
                <tr>
                    <td class="lottery-unit lottery-unit-13">
                        <span class="photo j_1"><img data-src="images/u112.jpg" class="loadImg"></span>
                        <div class="mask"></div>
                    </td>
                    <td class="lottery-unit lottery-unit-7">
                        <span class="photo j_1"><img data-src="images/u112.jpg" class="loadImg"></span>
                        <div class="mask"></div>
                    </td>
                </tr>
                <tr>
                    <td class="lottery-unit lottery-unit-12">
                        <span class="photo j_1"><img data-src="images/u112.jpg" class="loadImg"></span>
                        <div class="mask"></div>
                    </td>
                    <td class="lottery-unit lottery-unit-11">
                        <span class="photo j_1"><img data-src="images/u112.jpg" class="loadImg"></span>
                        <div class="mask"></div>
                    </td>
                    <td class="lottery-unit lottery-unit-10">
                        <span class="photo j_1"><img data-src="images/u112.jpg" class="loadImg"></span>
                        <div class="mask"></div>
                    </td>
                    <td class="lottery-unit lottery-unit-9">
                        <span class="photo j_1"><img data-src="images/u112.jpg" class="loadImg"></span>
                        <div class="mask"></div>
                    </td>
                    <td class="lottery-unit lottery-unit-8">
                        <span class="photo j_1"><img data-src="images/u112.jpg" class="loadImg"></span>
                        <div class="mask"></div>
                    </td>
                </tr>
            </tbody>
        </table>

        <!-- 活动说明 -->
        <div class="wrapper font20">
            <span class="title">活动说明：</span>
            <p class="content"> 1、每个微信号每天有一次免费赢豪礼机会<br> 2、使用微信扫一扫打开活动页面<br> 3、拍摄与小舱合影分享朋友圈，即可获得一次免费抽奖<br> 4、分享成功后可参加抽奖，100%获得本机在售商品</p>
            <span class="tip font16">（食尚客舱对本活动保留最终解释权，微信扫码授权后即表示清楚并接受《用户隐私许可协议》）</span>
        </div>
    </section>

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/global.js"></script>
    <script type="text/javascript">
        myJS.imgScale('.j_1', '1', '1');
        myJS.ImgCenter('.loadImg');
        var lottery={
            index:-1,    //当前转动到哪个位置，起点位置
            count:0,    //总共有多少个位置
            timer:0,    //setTimeout的ID，用clearTimeout清除
            speed:20,    //初始转动速度
            times:0,    //转动次数
            cycle:50,    //转动基本次数：即至少需要转动多少次再进入抽奖环节
            prize:-1,    //中奖位置
            init:function(id){
                if ($("#"+id).find(".lottery-unit").length>0) {
                    $lottery = $("#"+id);
                    $units = $lottery.find(".lottery-unit");
                    this.obj = $lottery;
                    this.count = $units.length;
                    $lottery.find(".lottery-unit-"+this.index).addClass("active");
                };
            },
            roll:function(){
                var index = this.index;
                var count = this.count;
                var lottery = this.obj;
                $(lottery).find(".lottery-unit-"+index).removeClass("active");
                index += 1;
                if (index>count-1) {
                    index = 0;
                };
                $(lottery).find(".lottery-unit-"+index).addClass("active");
                this.index=index;
                return false;
            },
            stop:function(index){
                this.prize=index;
                return false;
            }
        };

        function roll(){
            lottery.times += 1;
            lottery.roll();//转动过程调用的是lottery的roll方法，这里是第一次调用初始化
            if (lottery.times > lottery.cycle+10 && lottery.prize==lottery.index) {
                clearTimeout(lottery.timer);
                lottery.prize=-1;
                lottery.times=0;
                click=false;
            }else{
                if (lottery.times<lottery.cycle) {
                    lottery.speed -= 10;
                }else if(lottery.times==lottery.cycle) {
                    var index = Math.random()*(lottery.count)|0;//中奖物品通过一个随机数生成
                    lottery.prize = index;        
                }else{
                    if (lottery.times > lottery.cycle+10 && ((lottery.prize==0 && lottery.index==7) || lottery.prize==lottery.index+1)) {
                        lottery.speed += 110;
                    }else{
                        lottery.speed += 20;
                    }
                }
                if (lottery.speed<40) {
                    lottery.speed=40;
                };
                //console.log(lottery.times+'^^^^^^'+lottery.speed+'^^^^^^^'+lottery.prize);
                lottery.timer = setTimeout(roll,lottery.speed);//循环调用
            }
            return false;
        }

        var click=false;

        window.onload=function(){
            lottery.init('lottery');
            $("#lottery .cjBtn").click(function(){
                if (click) {//click控制一次抽奖过程中不能重复点击抽奖按钮，后面的点击不响应
                    return false;
                }else{
                    lottery.speed=100;
                    roll();    //转圈过程不响应click事件，会将click置为false
                    click=true; //一次抽奖完成后，设置click为true，可继续抽奖
                    return false;
                }
            });
        };
    </script>
</body>
</html>